<template>
	<view class="content">
		<!-- 头部 -->
		<view class="header" style="margin-top: 50rpx;">
			<uni-nav-bar left-icon="back" left-text="返回"   right-text="保存" title="编辑个人信息" color='#3b71d2' @clickLeft="back" @clickRight='reposit'></uni-nav-bar>
		</view>
		<!-- 信息 -->
		<view class="form">
			<view class="cu-form-group margin-top">
				<view class="title">头像</view>
				<image :src="img_url" mode="" @tap="select_img"></image>
			</view>
			<view class="cu-form-group ">
				<view class="title">昵称</view>
				<input :placeholder="name" name="input" value="" @input="change_name"></input>
			</view>
			<view class="cu-form-group" style="border-bottom: 1upx solid #eee;">
				<view class="title">手机</view>
				<input :placeholder="phone" name="input" value="" @input="change_phone"></input>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
                img_url:'',
				name:'',
				phone:'',
			}
		},
		onLoad(){
			//获取个人中心数据
			var uid=uni.getStorageSync('uid');
				this.infoprop('/Member/index', 'POST',{Uid:uid}, (res) => {
					this.our_data=res.data.data;
					this.name=res.data.data.nick_name;
					this.phone=res.data.data.user_tel;
					this.img_url=res.data.data.user_headimg;
					console.log(this.our_data);
				})
		},
		methods: {
			// 返回上一级
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			reposit(){
				var uid=uni.getStorageSync('uid');
				var json={
					Uid:uid,
					nick_name:this.name,
					user_headimg:this.img_url.split(",")[1],
					user_tel:this.phone
				}
				this.infoprop('/Member/EditUser', 'POST',json, (res) => {
					if(res.data.status){
						uni.navigateBack({
							delta: 1
						})
					}else{
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
					}
				})
			},
			select_img(){
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success:(res)=>{
						//this.img_url=res.tempFilePaths[0];
						this.urlTobase64(res.tempFilePaths[0]);
				        console.log(this.img_url);
				    }
				});
			},
			//64位转换
			urlTobase64(url) {
			var toBase64Url;
			uni.request({
			url: url,
			method: 'GET',
			responseType: 'arraybuffer',
			success: async res => {
			let base64 = wx.arrayBufferToBase64(res.data); //把arraybuffer转成base64
			toBase64Url = 'data:image/jpeg;base64,' + base64; //不加上这串字符，在页面无法显示
			this.img_url=toBase64Url;
			//console.log(toBase64Url);
			}
			});
			},
			
			change_name(e){
				this.name=e.detail.value;
				//console.log(this.name)
			},
			change_phone(e){
				this.phone=e.detail.value;
				//console.log(this.phone)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.cu-form-group {
			background-color: #ffffff;
			padding: 1upx 30upx;
			display: flex;
			align-items: center;
			min-height: 100upx;
			justify-content: space-between;

			image {
				width: 100rpx;
				height: 100rpx;
				padding: 20rpx 0;
			}
		}

		.cu-form-group+.cu-form-group {
			border-top: 1upx solid #eee;
		}

		.cu-form-group .title {
			text-align: justify;
			padding-right: 30upx;
			font-size: 30upx;
			position: relative;
			height: 60upx;
			line-height: 60upx;
		}

		.cu-form-group input {
			flex: 1;
			font-size: 30upx;
			color: #555;
			padding-right: 20upx;
		}

		.cu-form-group>text[class*="cuIcon-"] {
			font-size: 36upx;
			padding: 0;
			box-sizing: border-box;
		}

		.cu-form-group textarea {
			margin: 32upx 0 30upx;
			height: 4.6em;
			width: 100%;
			line-height: 1.2em;
			flex: 1;
			font-size: 28upx;
			padding: 0;
		}

		.cu-form-group.align-start .title {
			height: 1em;
			margin-top: 32upx;
			line-height: 1em;
		}

		.cu-form-group picker {
			flex: 1;
			padding-right: 40upx;
			overflow: hidden;
			position: relative;
		}

		.cu-form-group picker .picker {
			line-height: 100upx;
			font-size: 28upx;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			width: 100%;
			text-align: right;
		}

		.cu-form-group picker::after {
			font-family: cuIcon;
			display: block;
			content: "\e6a3";
			position: absolute;
			font-size: 34upx;
			color: #8799a3;
			line-height: 100upx;
			width: 60upx;
			text-align: center;
			top: 0;
			bottom: 0;
			right: -20upx;
			margin: auto;
		}

		.cu-form-group textarea[disabled],
		.cu-form-group textarea[disabled] .placeholder {
			color: transparent;
		}
	}
</style>
